<template>
	<view class="page-root">
		
		<view class="blur-red-bg">
				<view class="register-container ">
		<view class="upload-view">
			<wd-upload :file-list="fileList" :limit="1" :action="ossUrl" @change="handleChange"></wd-upload>
		</view>
		<!-- 用户名输入 -->
		<view class="input-item">
			<view class="input-icon">
				<wd-icon name="user" size="22px"></wd-icon>
			</view>
			<wd-input v-model="form.username" placeholder="请设置用户名" :maxlength="20" input-align="left"
				class="input flex-1" label="用户名" label-width="140rpx"></wd-input>
		</view>

		<!-- 绑定手机号：修复v-model变量冲突（原与联系电话共用form.phone） -->
		<view class="input-item">
			<view class="input-icon">
				<wd-icon name="mobile" size="22px" class="input-icon"></wd-icon>
			</view>
			<wd-input v-model="form.mobile" placeholder="请输入手机号" :maxlength="11" type="number" input-align="left"
				class="input flex-1" label="绑定手机号" label-width="140rpx"></wd-input>
		</view>

		<!-- 联系电话：保留form.phone，与绑定手机号区分 -->
		<view class="input-item">
			<view class="input-icon">
				<wd-icon name="mobile" size="22px" class="input-icon"></wd-icon>
			</view>
			<wd-input v-model="form.phone" placeholder="请输入联系电话" type="number" :maxlength="11" input-align="left"
				class="input" label="联系电话" label-width="140rpx"></wd-input>
		</view>

		<!-- 地址输入 -->
		<view class="input-item">
			<view class="input-icon input-icon-textarea">
				<wd-icon name="location" size="22px" class="input-icon"></wd-icon>
			</view>
			<!-- <wd-textarea label="地址"	label-width="140rpx"  clearable v-model="form.phone"  placeholder="请输入..." required></wd-textarea> -->
			<wd-textarea v-model="form.location" placeholder="请输入地址" label="地址"></wd-textarea>

			<!-- <wd-input 
				v-model="form.location" 
				placeholder="请输入地址" 
				input-align="left"
				class="input" 
				label="地址" 
				label-width="140rpx"
			></wd-input> -->
		</view>

		<!-- 注册按钮 -->
		<view class="btn-register">
			<wd-button type="primary" block :loading="loading" :disabled="!canRegister" @click="register">
				提交
			</wd-button>
		</view>

		<!-- 补全登录跳转链接，提升用户体验 -->
		<!-- <view class="login-link">
			已有账号？<text class="link" @click="toLogin">立即登录</text>
		</view> -->
	</view>
		</view>
	
	</view>
	
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { useRouter } from 'uni-mini-router'
import { volunteer_get_user_infoApi, volunteer_submit_userinfoApi } from "@/api/volunteer"
import { onLoad } from '@dcloudio/uni-app';

//file-list 设置上传列表，数据类型为数组；
const fileList = ref([])
//action 设置上传的地址；
const ossUrl = ref('https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload')
//数据更改后通过绑定 change 事件给 fileList 赋值。
function handleChange({ fileList: files }) {
	fileList.value = files
}


// 1. 路由实例：用于页面跳转（保留原逻辑）
const router = useRouter()

// 2. 加载状态：控制按钮加载动画（原代码缺失，避免重复点击）
const loading = ref(false)

// 3. 表单数据：响应式管理，修复「手机号变量冲突」问题
const form = reactive({
	username: '',    // 用户名
	mobile: '',      // 绑定手机号（独立字段，原与联系电话共用form.phone）
	phone: '',       // 联系电话（独立字段）
	location: ''     // 地址
})

// 4. 按钮启用判断：计算属性，所有必填字段填写完整才启用注册按钮
const canRegister = computed(() => {
	// 校验所有必填字段：用户名、绑定手机号、联系电话、地址（均非空）
	return (
		form.username.trim() !== '' &&
		form.mobile.trim() !== '' &&
		form.phone.trim() !== '' &&
		form.location.trim() !== ''
	)
})

// 5. 表单验证函数：细化规则（非空 + 格式校验）
const validateForm = () => {
	// 校验用户名：2-20位（符合maxlength限制）
	if (form.username.length < 2 || form.username.length > 20) {
		uni.showToast({ title: '用户名长度需为2-20位', icon: 'none' })
		return false
	}

	// 校验绑定手机号：11位数字正则
	const phoneReg = /^1[3-9]\d{9}$/
	if (!phoneReg.test(form.mobile)) {
		uni.showToast({ title: '请输入正确的绑定手机号', icon: 'none' })
		return false
	}

	// 校验联系电话：11位数字（与手机号格式一致，可根据需求调整）
	if (!phoneReg.test(form.phone)) {
		uni.showToast({ title: '请输入正确的联系电话', icon: 'none' })
		return false
	}

	// 校验地址：非空（可根据需求加长度限制，如最少5位）
	if (form.location.length < 5) {
		uni.showToast({ title: '地址请填写完整（至少5位）', icon: 'none' })
		return false
	}

	return true // 所有校验通过
}

onLoad((options) => {
	volunteer_get_user_infoApi({
		id: options.id || 1
	}).then((res) => {
		if (res.code == 200) {
			Object.assign(form, res.data);
			fileList.value = [{
				url: res.data?.avatar
				// url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg'

			}]
		}
	})
})

// 6. 注册提交核心逻辑
const register = async () => {
	// 防止加载中重复点击
	if (loading.value) return

	// 第一步：表单校验
	if (!validateForm()) return

	// 第二步：开启加载状态
	loading.value = true

	try {
		// 第三步：构造接口请求参数（与form字段对应，去除冗余）


		// 第四步：调用注册接口（实际项目替换为真实接口，此处用注释示例）
		// const res = await registerApi(param) // 假设registerApi是封装的接口函数

		// 模拟接口请求成功（实际项目删除此段，用真实res判断）
		// const res = { code: 200, message: '提交成功' }

		// 第五步：接口响应处理
		const param = {
			id:"",
			username: form.username.trim(),
			mobile: form.mobile.trim(),
			phone: form.phone.trim(),
			location: form.location.trim(),
			avatar: fileList.length > 0 ? fileList[0]["url"] : ""
		}

		volunteer_submit_userinfoApi(param).then((res) => {
			if (res.code == 200) {
				uni.showToast({ title: res.message, icon: 'success' })
				// 跳转登录页（replaceAll：清除注册页历史，避免回退到注册页）
				router.pushTab({ name: 'volunteer_mine' })
			} else {
				// 接口返回业务错误（如用户名/手机号已存在）
				uni.showToast({ title: res.msg || '注册失败，请重试', icon: 'none' })
			}
		})


	} catch (error) {
		// 第六步：捕获网络错误（如断网、接口异常）
		console.error('注册请求失败：', error)
		uni.showToast({ title: '网络异常，请检查网络', icon: 'none' })
	} finally {
		// 第七步：无论成功/失败，关闭加载状态
		loading.value = false
	}
}
 
</script>

<style lang="less">


.upload-view {
	display: flex;
	justify-content: center;
}

/* 样式保持原代码不变，此处省略（与用户提供的样式一致） */
.register-container {
	position: relative;
	padding: 80rpx 40rpx 0;
	z-index: 1;
	background-color: #fff;
	min-height: 100vh;
	box-sizing: border-box;
}

.register-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #333;
	margin-bottom: 80rpx;
	text-align: center;
}

.input-item {
	border-bottom: 1px solid #e5e5e5;
	padding: 15rpx 0;
	margin-bottom: 10rpx;
	display: flex;

	.input-icon {
		flex: 0 0 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.input-icon-textarea {
		align-items: start;
		padding-top: 6px;
	}
}

.code-item {
	display: flex;
	align-items: center;
	gap: 0rpx;
}

:deep(.wd-input.is-cell) {
	padding-left: 0rpx !important;
}

:deep(.wd-cell) {
	padding-left: 0rpx !important;
}

.wd-input {
	&::v-deep .wd-input__control {
		font-size: 30rpx;
		color: #333;
		height: 80rpx;
		line-height: 80rpx;
	}

	&::v-deep .wd-input__prefix-icon {
		font-size: 34rpx;
		color: #999;
		margin-left: 10rpx;
	}

	&::v-deep .wd-input__label {
		font-size: 30rpx;
		color: #333;
		text-align: left;
	}
}

.btn-code {
	width: 200rpx;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 28rpx;
	flex-shrink: 0;
}

.password-match {
	margin: 5rpx 0 30rpx 150rpx;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	gap: 5rpx;
}

.match-success {
	color: #52c41a;
}

.match-error {
	color: #ff4d4f;
}

.btn-register {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	border-radius: 16rpx;
	margin: 40rpx 0;
}

.login-link {
	text-align: center;
	font-size: 28rpx;
	color: #666;
}

.link {
	color: #007aff;
}

.wd-textarea {
	width: 100%;
	padding-left: 0;
	padding-top: 6px;
}

:deep(.wd-textarea__label) {
	flex: 0 0 140rpx;
}

:deep(.wd-textarea__label-inner) {
	display: flex;
	align-items: start;

}

</style>